<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>综合服务系统--成员统计</title>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/supplier/common/css/style.css"/>
    <!--Layui-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--extended-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/extended.css"/>
    <link rel="stylesheet" href="/plugin/it/common/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <!--公用样式JS-->
    <script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/comment.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/zTree/js/jquery.ztree.all.js" charset="utf-8"></script>
</head>
<style>
    .Right {
        width: 100%;
        overflow-y: auto;
    }

    .layui-btns {
        display: inline-block;
        height: 38px;
        line-height: 38px;
        padding: 0 18px;
        background-color: #fff;
        color: #00a0e9;
        border-color: #00a0e9;
        border-width: 2px;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
        border-radius: 5px;
        cursor: pointer
    }

    .project table tr th {
        background: #5775EF;
        color: #FFF;
    }

    .layui-breadcrumb a:hover {
        color: #5775EF !important;
    }

    .widinput {
        height: 35px;
        border: 1px solid #DDDDDD;
        width: 90%;
        box-sizing: border-box;
    }

    .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background: #5775EF;
    }
</style>

<body>
<!--头部-->
<div style="background-color: #F1F4FB;padding-left: 20px;">
    <span class="layui-breadcrumb" lay-separator=">">
        <a><cite>统计分析</cite></a>
        <a href="#"><cite>成员统计</cite></a>
    </span>
</div>
<!--容器-->
<div class="container clearfix">
    <!--右侧内容-->
    <div class="Right fr">
        <div class="screening screeningOne whitebg clearfix" style="margin-top: 0;">

            <div class="ask fl clearfix" style="width: 16%;">

                <input type="text" class="layui-input widinput" style=""
                       name="userName" id="userName" autocomplete="off" placeholder="请输入用户名搜索">

            </div>

            <div class="ask fl clearfix" style="width: 16%;">

                    <input type="text" class="layui-input widinput" id="startTime" placeholder="开始时间"
                           style="">

            </div>
            <div class="ask fl clearfix" style="width: 16%;">

                    <input type="text" class="layui-input widinput" id="endTime" placeholder="结束时间" style="">

            </div>
            <div style="width: 16%;float: left;">
                <select name="type" class="ml8 fl" id="category" style="width: 90%; height: 35px;margin-right: 1%;"
                        lay-ignore>
                    <option value="">考试类型</option>
                    <#list kslx as vo>
                        <option value="${vo.badtCode}"
                        >${vo.badtName}</option>
                    </#list>
                </select>
            </div>

            <button type="button" class="bluebg white" style="width: 70px;height: 35px;" onclick="query()">搜索
            </button>

            <div class="fr clearfix">
                <input class="layui-bts fr ml10"
                       style="background: #FFFFFF;border-color: #3e7ce7;color: #3e7ce7;height: 35px;padding: 0 10px;"
                       type="button" value="导出数据" onclick="exportUser()">
            </div>
        </div>
        <div class="project whitebg">
            <table id="tableList" class="layui-hide" lay-filter="tableList"></table>
        </div>
    </div>
</div>
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/tabs.js"></script>
<script type="text/html" id="toolBarRow">
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="edit" style="margin-left: 0px;">编辑</a>
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="del" style="margin-left: 0px;">删除</a>
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="derive" style="margin-left: 0px;">查看</a>
</script>
<script type="text/javascript">
    var layer;
    var form = layui.form;
    var table = null;
    var tableIns = null;
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    var element = "";
    layui.use(['element', 'laydate', 'table'], function () {
        element = layui.element;
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#startTime' //指定元素
            , type: 'date'
        });
        laydate.render({
            elem: '#endTime' //指定元素
            , type: 'date'
        });

    });

    //筛选
    function query() {
        var userName = $('#userName').val();
        var startTime = $('#startTime').val();
        var endTime = $('#endTime').val();
        var category = $('#category').val();
        var jsondata = {
            userName: userName,
            startTime: startTime,
            endTime: endTime,
            category: category
        };
        console.log(jsondata);
        table.reload('tableList', {where: jsondata});
    }

    layui.use('table', function () {
        table = layui.table;
        element = element;
        //方法级渲染
        tableIns = table.render({
            id: 'tableList',
            elem: '#tableList',
            url: '/ex/statistics/getUserExamCountList',
            height: "auto",
            page: true,
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {
                    title: '序号', width: '10%', templet: function (res) {
                        return res.LAY_INDEX;
                    }
                },
                {field: 'id', title: 'ID', hide: true, sort: false},
                {field: 'userName', title: '成员姓名', width: '18%', sort: false},
                {field: 'passExamCount', title: '通过考试次数', width: '18%'},
                {field: 'passProportion', title: '考试通过比例', width: '18%',},
                {field: 'mockExamCount', title: '模拟练习次数', width: '18%'},
                {field: 'totalExamCount', title: '已参与考试', width: '18%'},
            ]],
            done: function (res, currentCount) {
                //!***重点***：table渲染完成后渲染element进度条
                element.render();
                $(".layui-table-page select").css("width", "80px");
            }
        });
        //监听工具条
        table.on('tool(tableList)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                edit(data.paperId);
            }
            if (obj.event === 'del') {
                del(data);
            }
            if (obj.event === 'derive') {
                derive(data.paperId);
            }
        });
    });

    //回收站
    function hsz() {
        window.parent._showtab('cf8c85d36852345b23a4104ef32197c', '回收站', '/ex/exPaper/recyclePaper');
    }

    //导出数据
    function exportUser() {
        var checkStatus = table.checkStatus('tableList');
        let rows = checkStatus.data;
        if (rows.length > 0) {
            let ids = '';
            for (let i = 0; i < rows.length; i++) {
                if (i == rows.length - 1) {
                    ids += "'" + rows[i].id + "'"
                } else {
                    ids += "'" + rows[i].id + "',";
                }
            }
            var userName = $('#userName').val();
            var startTime = $('#startTime').val();
            var endTime = $('#endTime').val();
            var category = $('#category').val();
            let paramStr = 'userName='
                + userName + '&startTime='
                + startTime + '&endTime='
                + endTime + '&category='
                + category
            window.open('/ex/statistics/exportUserExamCountList?' + paramStr +'&ids='+ ids)
        } else {
            var userName = $('#userName').val();
            var startTime = $('#startTime').val();
            var endTime = $('#endTime').val();
            var category = $('#category').val();
            let paramStr = '?userName='
                + userName + '&startTime='
                + startTime + '&endTime='
                + endTime + '&category='
                + category
            window.open('/ex/statistics/exportUserExamCountList' + paramStr)
        }
    }

    /**树形下拉 **/

    var newCount = 1;   //这个属性是ztree添加节点的时候命名的依据（new node1、new node2）
    /***过滤条件****/
    function filter(node) {
        return (node.level == 0);
    }

    /*** 禁止拖动成为根节点 ****/
    function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) {
        return !(targetNode == null || (moveType != "inner" && !targetNode.parentTId));
        ;
    };

    /******捕获异步加载正常结束,展开一级节点*******/
    function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getNodesByFilter(filter); // 查找节点集合
        if (nodes.length > 0) {
            for (var i in nodes) {
                treeObj.expandNode(nodes[i], true);
            }
        }
    };
    var setting = {
        treeId: "treeDemo",
        async: {
            enable: true,
            url: "/ex/exPaper/selectTree",
            autoParam: ["id"],
            type: 'get'
        },
        callback: {
            onAsyncSuccess: zTreeOnAsyncSuccess,        //用于捕获异步加载正常结束的事件回调函数
            beforeRemove: beforeRemove,                 //用于捕获节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作
            //用于捕获节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作
            beforeRename: beforeRename,
            onRemove: zTreeOnRemove,                    //用于捕获删除节点之后的事件回调函数。
            beforeDrop: zTreeBeforeDrop,                //用于捕获节点拖拽操作结束之前的事件回调函数，并且根据返回值确定是否允许此拖拽操作
            onDrop: zTreeOnDrop,                        //用于捕获节点拖拽操作结束的事件回调函数
            onClick: zTreeOnClick                       //用于捕获节点被点击的事件回调函数
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pid"
            }
        },
        edit: {
            enable: true,
            editNameSelectAll: false,       //节点编辑名称 input 初次显示时,设置 txt 内容是否为全选状态
            removeTitle: "删除",
            renameTitle: "编辑",
            showRemoveBtn: showRemoveBtn,   //可根据实际业务需求控制是否显示 删除 按钮（方法返回true/false）
            showRenameBtn: showRenameBtn,   //可根据实际业务需求控制是否显示 编辑 按钮（方法返回true/false）
            drag: {
                autoExpandTrigger: true,    //拖拽时父节点自动展开是否触发 onExpand 事件回调函数
                isCopy: false,             //拖拽时, 设置是否允许复制节点  默认值：true
                isMove: false,              //拖拽时, 设置是否允许移动节点
                prev: true,                 //设置是否允许移动到目标节点前面的操作
                next: true,                 //设置是否允许移动到目标节点后面的操作
                inner: true,                //设置是否允许成为目标节点的子节点
                borderMax: 20,              //拖拽节点成为根节点时的 Tree 内边界范围 (单位：px)
                borderMin: -10,             //拖拽节点成为根节点时的 Tree 外边界范围 (单位：px)
                minMoveSize: 5,             //判定是否拖拽操作的最小位移值 (单位：px)
                maxShowNodeNum: 5,          //拖拽多个兄弟节点时，浮动图层中显示的最大节点数  多余的节点用...代替
                autoOpenTime: 0             //拖拽时父节点自动展开的延时间隔

            }
        },
        view: {
            addHoverDom: addHoverDom,               //鼠标滑过显示添加按钮
            removeHoverDom: removeHoverDom,         //鼠标滑过移除添加按钮
            dblClickExpand: true,
            txtSelectedEnable: true,
            showIcon: true,
            showLine: true,
            showTitle: true
        }
    }

    /***是否显示删除按钮 （flag是我后台自定义的节点属性，不是ztree的节点属性，可根据自己的业务自己定义其他条件）**/
    function showRemoveBtn(treeId, treeNode) {
        if (treeNode.flag != '1' && treeNode.level != 0) {
            return true;
        } else {
            return false;
        }
    }

    /***是否显示编辑按钮**/
    function showRenameBtn(treeId, treeNode) {
        if (treeNode.flag != '1' && treeNode.level != 0) {
            return true;
        } else {
            return false;
        }
    }

    //鼠标滑过取消显示添加按钮
    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_" + treeNode.tId).unbind().remove();
    };

    /** 鼠标悬浮显示添加按钮 可根据实际业务判断是否显示添加按钮 flag是我后台自定义的节点属性，不是ztree的节点属性*/
    function addHoverDom(treeId, treeNode) {
        if (treeNode.flag != '1') {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='add node' οnfοcus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_" + treeNode.tId);
            if (btn) btn.bind("click", function () {
                addNodes(treeNode);
                return false;
            });
        }
    };

    /***** 添加节点 直接与后台进行数据交互保存数据*****/
    function addNodes(treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        //这个方法是ztree添加节点的方法
        zTree.addNodes(treeNode, {id: (100 + newCount), pId: treeNode.id, name: name});
        var name = "new node" + (newCount++);   //名称
        var parentRoleId = treeNode.id;
        var param = {name: name, parentRoleId: parentRoleId};
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        $.ajax({
            url: "/ucRole/add",
            type: "get",
            dataType: "json",
            async: true,
            data: param,
            success: function (data) {
                if (data.code == 200) {
                    layer.msg("添加成功!", {icon: 1});
                    var node = treeObj.getNodeByTId(treeNode.tId);
                    treeObj.reAsyncChildNodes(node, "refresh");
                }
            },
            error: function () {
                layer.msg("系统异常", {icon: 2})
            }
        })
    }

    /*** 重命名 可根据业务需求控制能否进行重命名，可直接与后台进行数据交互**/
    function beforeRenamen(treeId, treeNode, newName) {
        if (newName.length == 0) {
            setTimeout(function () {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.cancelEditName();
                alert("节点名称不能为空.");
            }, 0);
            return;
        }
        var id = treeNode.id;
        console.log(id)
        var param = {name: newName.trim(), id: id};
        layerAjaxGet("/ex/exPaper/updateTree", param, '', function (d) {
            if (d.flag) {
                layer.msg("编辑成功!", {icon: 1});
                $("#name").val(newName);
            } else {
                layer.msg("系统异常", {icon: 2})
            }
        })
        return true;
    }

    //ztree删除节点成功后（样式上删除，实际没有走后台删除数据）走这个方法，与后台交互删除数据
    function zTreeOnRemove(treeNode) {
        var id = treeNode.ids;
        $.ajax({
            url: "/ucRole/delete",
            type: "post",
            dataType: "json",
            async: true,
            data: {ucRoleId: id},
            success: function (data) {
                if (data.code == 200) {
                    layer.msg("已删除!", {icon: 1});
                    var ids = $("#id").val();
                    if (id == ids) {
                        $("#info").css('display', "none");
                    }
                }
            },
            error: function (data) {
                layer.msg("系统异常", {icon: 2})
            }
        })
    }

    //ztree删除节点之前判断是否允许删除节点（这个方法做了一些修改，因为ztree自带的弹窗不是很美观好用）
    function beforeRemove(treeId, treeNode) {
        if (treeNode.level == '0') {
            layer.msg("根节点不能删除!", {icon: 2});
            return false;
        }
        layer.confirm("确认删除" + treeNode.name + "吗?", {
            btn: ['确定', '取消'] //按钮
        }, function () {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.removeNode(treeNode);
            zTreeOnRemove(treeNode);
            layer.closeAll()
        })
        return false;
    }

    //拖动节点成功后与后台进行数据交互的方法
    function zTreeOnDrop(event, treeId, treeNodes) {
        if (treeNodes[0].level == '0') {
            layer.msg("根节点不能移动!", {icon: 2});
            return false;
        }
        var node = treeNodes[0];
        var id = node.ids;                 //id
        var param = {id: id};
        $.ajax({
            url: "/ucRole/update",
            type: "post",
            dataType: "json",
            async: true,
            data: param,
            success: function (data) {
                if (data.code == 200) {
                    layer.msg("移动成功!", {icon: 1});
                }
            },
            error: function () {
                layer.msg("系统异常", {icon: 2})
            }
        })
    };

    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting);
    });

    //点击节点触发的方法，可以在里面写自己的业务逻辑（比如说数据的展示）
    function zTreeOnClick(event, treeId, treeNode) {

        var id = treeNode.id;
        var jsondata = {
            quCategory: id,
        };
        table.reload('tableList', {where: jsondata});
    };
</script>
</body>

</html>
